<template>
  <div class="home">
    <div :style="{color: nowColor }">当前颜色:{{ nowColor }}</div>
    <div class="event">
      <el-button class="bg-lime-500" type="success" @click="alterColor">改变颜色</el-button>
    </div>
    <hr />
    <div class="directives">
      <h2>自定义显示按钮</h2>
      <el-button v-hasPermi="['user:admin:add']">新增</el-button>
      <el-button v-hasPermi="['user:admin:delete']">删除</el-button>
      <el-button v-hasPermi="['user:admin:update']">修改</el-button>
      <el-button v-hasPermi="['user:admin:detail']">详情</el-button>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { alterColor, nowColor } from '@/utils/common'
onMounted(() => {
  getData()
})
const resData = ref({})
async function getData() {
  // const res = await axios.post('/api/todos').then(res => console.log(res)).catch(err => console.error('Error getting data'))
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
.event{
  margin: 10px 0;
}
.directives {
  margin-top: 20px;
  h2{
    font-weight: bold;
    font-size: 20px;
  }
}
</style>
